<template>
  <div class="xiaoqu">
    <div class="text1" style="margin-bottom: 20px">
      擅长领域:<input type="text" v-model="value01" style="height: 36px">
      <el-button type="primary" @click="select" style="margin-left: 20px">搜索</el-button>
      <el-button type="primary"  @click="shujuclear(),dialogFormVisible = true">新增擅长领域</el-button>
    </div>

    <!--增加弹框1-->
    <div>
      <el-dialog title="新增擅长领域" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="adddate">确 定</el-button>
        </div>

      </el-dialog>
    </div>

    <!--   编辑弹框信息   --------------->
    <div>
      <el-dialog title="编辑咨询师" :visible.sync="dialogFormVisible4">
        <el-form :model="form">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible4 = false">取 消</el-button>
          <el-button type="primary" @click="updatexinxi()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!------------------------------------------------------------------------------------------>
    <!--主页面表格-->
    <el-table
        :data="xiaoquList"
        border
        style="width: 1200px"
        color:black
        :header-cell-style="{'background-color':'#409EFF',
color:'#fff',textAlign:'center'}"
        :cell-style="{textAlign:'center'}">
      <el-table-column
          fixed
          prop="id"
          label="ID"
          width="280">
      </el-table-column>
      <el-table-column
          prop="areaName"
          label="咨询师领域"
          width="700">
      </el-table-column>
      <el-table-column
          label="操作"
          width="200">
        <template slot-scope="scope">
          <!--          <el-button @click="handleClick(scope.row),looklook()" type="text" size="small">查看关联门店</el-button>-->
          <el-button type="text" size="small" @click="handleClick(scope.row)">编辑咨询师</el-button>
          <el-button type="text" size="small" @click="handleClick1(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--页码-->
    <div class="block">
      <el-pagination
          layout="prev, pager, next"
          :total="1">
      </el-pagination>
    </div>
    <!--      小谈框-->
    <div>
      <el-dialog title="是否删除" :visible.sync="dialogFormVisible3">
        <div slot="footer" class="dialog-footer">
          <el-button @click="quxiaochuxian">取 消</el-button>
          <el-button type="primary" @click="deletexinxi">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "shanchanglingyu",
  data() {
    return {
      value01: '',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      dialogFormVisible5: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        shanchanglingyu: '',
        jieshao: ''
      },
      formLabelWidth: '120px',
      xiaoquList:[],
      id:''
    }
  },
  created() {//默认请求全部商品
    this.axios.request("/field/getFieldList", {
      params: {
        pageNum: 1,
        pageSize: 20,
      }
    }).then((res) => {
      this.xiaoquList = res.data.data[0].list;
      console.log(res.data)
    }).catch((err) => {
    })
  },
  methods: {
    handleClick(row) {
      this.dialogFormVisible4 = true;
      console.log(row);
      this.id = row.id;
      this.areaName = row.areaName;
      this.form.name = row.areaName;
    },
    handleClick1(row) {
      this.dialogFormVisible3 = true;
      console.log(row);
      this.id = row.id;
      this.areaName = row.areaName;
      this.form.name = row.areaName;
    },
    shujuclear() {
      this.form.name = '';
      this.address001 = '';
      this.form.shanchanglingyu = '';
      this.levelName = '';
      this.form.jieshao = '';
    },
    xianshid4() {
      this.dialogFormVisible4 = true;
    },
    //模糊查询
    select() {
      this.axios.post("/field/likeGetByName", {
        areaName: this.value01,
      }).then((res) => {
        this.xiaoquList = res.data.data;
        console.log(
            this.xiaoquList
        )
        console.log(
            res
        )
      }).catch((err) => {

      })

    },
    //获得坐标
    getlocation() {
      this.address01 = "";
      this.address01 = this.address1.join("") + this.address001;
      this.axios.request("https://restapi.amap.com/v3/geocode/geo", {
        params: {
          key: "7f73f1aeafb9ae63dcd6122b87ee79e5",
          address: this.address01,
        }
      }).then((res) => {
        this.location1 = res.data.geocodes[0].location;
      }).catch((err) => {

      })

    },
    //添加小区数据
    adddate() {
      this.dialogFormVisible = false;
      this.axios.post("/field/addField", {
        areaName:this.form.name
      }).then((res) => {
        console.log(res.data);
      }).catch((err) => {

      });
      alert("添加成功");
      window.location.reload();
    },
    //      删除数据
    deletexinxi() {
      this.axios.post("/field/deleteField", {
        id: this.id
      }).then((res) => {
        console.log(res.data);
      }).catch((err) => {

      });
      this.dialogFormVisible3 = false;
      alert("删除成功");
      window.location.reload();

    },
    open() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    quxiaochuxian() {
      this.dialogFormVisible3 = false;
      alert("已成功取消删除");
      window.location.reload();
    },
    updatexinxi() {
      this.dialogFormVisible4 = false;
      this.axios.post("/field/updateField", {
        id:this.id,
        areaName:this.form.name
      }).then((res) => {
        console.log(res.data);
      });
      window.location.reload();
      alert("修改成功");
      this.shujuclear();


    },
    deleteci() {
      // console.log(this.communityId);
      // console.log(this.communityId1);
      this.axios.post("/associatedStores/associatedStoresRemove", {
        panghuCommunityId: this.communityId,
        panghuShopId: this.communityId1,

      }).then((res) => {
        console.log(res.data);
      }).catch((err) => {
      });
      this.dialogFormVisible2 = false;


    },
    looklook() {
      this.form.name = '';
      this.axios.request("/associatedStores/associatedStoresList", {
        params: {
          pageNum: 1,
          pageSize: 10,
          shopName: "",
          communityId: this.communityId
        }
      }).then((res) => {
        this.chakanxiaoquList = res.data.data;

      }).catch((err) => {

      });
      this.dialogFormVisible2 = true;
    },
    searchass() {
      this.axios.request("/associatedStores/associatedStoresList", {
        params: {
          pageNum: 1,
          pageSize: 10,
          shopName: this.form.name,
          communityId: this.communityId
        }
      }).then((res) => {
        this.chakanxiaoquList = res.data.data;
      }).catch((err) => {

      })
    },
    searchass1() {
      this.axios.request("/associatedStores/findShopListByAdd", {
        params: {

          pageNum: 1,
          pageSize: 10,
          shopName: this.addguanlianname,
          communityId: this.communityId
        }
      }).then((res) => {
        this.chakanxiaoquList1 = res.data.data;
      }).catch((err) => {

      })
    },
    addass() {
      this.dialogFormVisible5 = true;
      this.axios.request("/associatedStores/findShopListByAdd", {
        params: {
          pageNum: 1,
          pageSize: 10,
          shopName: "",
          communityId: this.communityId
        }
      }).then((res) => {
        this.chakanxiaoquList1 = res.data.data;

      }).catch((err) => {

      });

    },

    change(shopId) {
      this.shopIdArr.push(shopId);

    },
    addguanlianmendian() {
      this.dialogFormVisible3 = false;
      console.log(this.shopIdArr);
      console.log(this.communityId);
      this.axios.post("/associatedStores/addAssociatedStores", {
        fendeShopCommunityList: this.shopIdArr,
        panghuCommunityId: this.communityId
      }).then((res) => {
        this.alladdAssociateCommunity = res.data.data;
        this.chakanxiaoquList = this.alladdAssociateCommunity.list;
        console.log(
            this.alladdAssociateCommunity
        )
      }).catch((err) => {
      });
      this.dialogFormVisible5 = false;


      this.dialogFormVisible2 = true;


    },
    /*关联门店弹窗按钮绑定事件跳到表单*/
    toggleSelection() {
      console.log(this.tableData.total);
      this.axios.request("/associatedStores/findShopListByAdd", {
        params: {
          pageNum: 1,
          pageSize: 10,
          shopName: '',
          communityId: this.communityId,
        }
      }).then((res) => {
        this.tableData = res.data.data;
      }).catch(() => {
      })

      this.dialogFormVisible5 = true;
    },
    /*关联门店表单管理分页处理*/
    handleCurrentChange1(page) {
      // 更新当前页码
      this.currentPage = page;
      // 重新加载数据
      this.toggleSelection();
    },
    /*获取选择门店的行数*/
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    /*保存关联门店*/
    baovunguanlian() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.getids.push(this.multipleSelection[i].shopId);
      }
      ;
      this.axios.post("/associatedStores/addAssociatedStores", {
        fendeShopCommunityList: this.getids,
        panghuCommunityId: this.communityId,
      }).then(() => {
        console.log("保存成功");
      }).catch(() => {
        console.log("警告!!")
      })
      this.dialogFormVisible5 = false;
    },

  },

}
</script>
<style scoped>
.xiaoqu {
  height: 800px;
  /*background-color: red;*/
}

.txt1 {
  line-height: 36px;
  text-align: center;
}

.box {
  text-align: center;
}

</style>